<template>
<div class="login-container">

	<!-- 动态云层动画 开始 -->
	<div class="clouds-container">
		<div class="clouds clouds-footer"></div>
		<div class="clouds"></div>
		<div class="clouds clouds-fast"></div>
	</div>
	<!-- 动态云层动画 结束 -->

	<!-- 顶部导航条 开始 -->
	<div class="header notselect">
		<span class="title notselect">SentCMS <sup>v{{system_version}}</sup></span>
		<ul>
			<li><a href="javascript:void(0)" target="_blank">帮助</a></li>
			<li>
				<a href="http://sw.bos.baidu.com/sw-search-sp/software/9e6bc213b9d0b/ChromeStandalone_63.0.3239.132_Setup.exe" target="_blank">推荐使用谷歌浏览器</a>
			</li>
		</ul>
	</div>
	<!-- 顶部导航条 结束 -->

	<!-- 页面表单主体 开始 -->
	<div class="container">
		<div class="login-from">
			<div class="logo"><img src="@/assets/images/logo.png"></div>
			<div class="form">
				<el-form :model="loginData" status-icon :rules="rules" ref="loginData" label-width="100px">
					<el-form-item prop="username">
						<el-input placeholder="请输入用户名" v-model="loginData.username" clearable></el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input placeholder="请输入密码" v-model="loginData.password" show-password></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="submitForm('loginData')">确认登录</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
	<!-- 页面表单主体 结束 -->

	<!-- 底部版权信息 开始 -->
	<div class="footer notselect">
		腾速科技 &copy; TenSent.Icn
	</div>
	<!-- 底部版本信息 结束 -->

</div>
</template>

<script>
export default{
	data(){
		return {
			system_version: process.env.VUE_APP_VERSION,
			loginData: {username: '', password: ''},
			rules:{
				username: {
					validator:(rule, value, callback) => {
						if (value === '') {
							this.$message({
								message: '请输入用户名',
								type: 'warning'
							});
							callback(new Error('请输入用户名'));
						}else{
							callback();
						}
					},
					trigger: 'blur'
				},
				password: {
					validator:(rule, value, callback) => {
						if (value === '') {
							this.$message({
								message: '请输入密码',
								type: 'warning'
							});
							callback(new Error('请输入密码'));
						}else{
							callback();
						}
					},
					trigger: 'blur'
				}
			}
		}
	},

	methods: {
		submitForm(formName) {
			this.$refs[formName].validate((valid, error) => {
				if (valid) {
					this.$store.dispatch('account/login', {
						vm: this,
						username: this.loginData.username,
						password: this.loginData.password
					}).then((e) => {
						// 重定向对象不存在则返回顶层路径
						this.$router.replace(this.$route.query.redirect || '/')
					});
				} else {
					// 登录表单校验失败
					this.$message.error('表单校验失败')
				}
			});
		}
	}
}
</script>

<style>
html,body{height:100%;width:100%;overflow:hidden!important;min-width:0}

.login-container{height:100%;background-color:#2494F2;overflow:hidden;font-size:9pt}
.login-container ul{display:block;margin:0;padding:0;list-style:none}
.login-container ul li{display:block;margin:0;padding:0;list-style:none}
.login-container .clouds-container{position:absolute;overflow:hidden;height:100%;width:100%}
.login-container .clouds{background:url("./images/cloud_two.png") repeat-x left 15%;position:absolute;left:0;top:0;height:100%;width:300%;-webkit-animation:cloudmove 200s linear infinite;-moz-animation:cloudmove 200s linear infinite;-o-animation:cloudmove 200s linear infinite;animation:cloudmove 200s linear infinite;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.login-container .clouds-fast{background:url("./images/cloud.png") no-repeat 0 40%;-webkit-animation:cloudmove 30s linear infinite;-moz-animation:cloudmove 30s linear infinite;-o-animation:cloudmove 30s linear infinite;animation:cloudmove 30s linear infinite}
.login-container .clouds-footer{background:url("./images/cloud_one.png") no-repeat left 100%;animation:none}

@keyframes cloudmove{0%{left:-50%}100%{left:150%}}
@-moz-keyframes cloudmove{0%{left:-50%}100%{left:150%}}
@-webkit-keyframes cloudmove{0%{left:-50%}100%{left:150%}}

.login-container .header{height:47px;position:absolute;top:0;z-index:100;width:100%}
.login-container .header a,
.login-container .header a:hover,
.login-container .header a:focus{text-decoration:none;color:#eee;outline:none}
.login-container .header a:hover{color:#fff}
.login-container .header span.title{line-height:47px;text-indent:44px;float:left;color:#fff;font-size:16px}
.login-container .header ul{float:right;padding-right:30px}
.login-container .header ul li{float:left;margin-left:20px;line-height:47px;}
.login-container .container{background:url(./images/bg.png) no-repeat center center;width:100%;height:585px;overflow:hidden;position:relative;top:50%;margin-top:-300px}

.login-from{box-shadow: 0 0 3px #cdcdcd; background: #ffffff; padding: 20px 30px; width:320px; margin: 50px auto auto auto;  border-radius: 4px;}
.login-from .logo{width: 60px; height:60px; overflow: hidden; margin: auto;}
.login-from .logo img{width: 60px; height:60px;}
.login-from .form{padding-top: 40px;}
.login-from .form .el-form-item__content{margin-left: 0 !important;}
.login-from .form .el-button{width: 100%;}

/* 底部版权 */
.login-container .footer{height:50px;line-height:50px;text-align:center;position:absolute;bottom:0;width:100%;color:#fff;;letter-spacing:0.5px}
.login-container .footer span{display:inline-block;height:10px;overflow:hidden;line-height:10px;padding-left:1px;padding-right:1px}
.login-container .footer a{color:#fff}
.login-container .footer a:hover{color:#fff}
</style>